<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >

      <el-form-item label="商品名称" prop="shopId">
        <el-select v-model="ruleForm.shopId"  placeholder="请选择商品名称">
          <el-option v-for="item in Stposc" :label="item.shopName" :value="item.shopId" />
        </el-select>
    </el-form-item>

    <el-form-item label="生产批次">
      <el-input v-model="ruleForm.batch" />
    </el-form-item>

    <el-form-item label="保质期(天)">
      <el-input v-model="ruleForm.periodTime" />
    </el-form-item>

    <el-form-item label="生产许可证书">
      <el-input v-model="ruleForm.license" />
    </el-form-item>

    <el-form-item label="生产企业">
      <el-input v-model="ruleForm.manuName" />
    </el-form-item>
    <el-form-item label="封面页">
    <el-upload
    class="avatar-uploader"
    action="http://localhost:5013/api/Pic/UploadImage/upload"
    :data="{ picType: 101, batch:ruleForm.batch}"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          新增
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted,reactive} from 'vue';
  import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
  import axios from 'axios'
  import {useRouter,useRoute} from 'vue-router'
import {useCounterStore} from '@/stores/counter'
import type { UploadProps } from 'element-plus'

const router=useRouter();
const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('仅支持 JPG/PNG 格式');
    return false;
  }else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }
  console.log(rawFile)
  console.log(imageUrl.value)
  return true
}
let Stroe=useCounterStore();
  interface RuleForm {
    shopId: string
    batch: string
    periodTime: string
    manuName: string
    improve: number
    isDelete: number
    createPeople:string
    license:string
   
  }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    shopId: '',
    batch: '',
    periodTime: '',
    manuName: '',
    improve: 0,
    license:'',
    createPeople:Stroe.CurrLoginUser.UserName,
    isDelete: 0,
   
  })
  
  const locationOptions = ['Home', 'Company', 'School']



onMounted(()=>{
    getshoplist();
})


const Stposc=ref<any>([]);
const getshoplist=()=>{
    axios({
    url:'http://localhost:5011/api/Product/QueryShop',
    method:'get',
    })
    .then(res=>{
        if(res.data.code==101){
            Stposc.value=res.data.list;
        }
    })
}


  
const submitForm = async (formEl: FormInstance | undefined) => {
if(ruleForm.shopId==''){
ElMessage.error("请选择商品名称")
return;
}
if(ruleForm.batch==''){
ElMessage.error("生产批次不能为空")
return;
}
if(ruleForm.periodTime==''){
ElMessage.error("保质期不能为空")
return;
}
if(ruleForm.manuName==''){
ElMessage.error("生产企业不能为空")
return;
}
if(ruleForm.license==''){
ElMessage.error("生产许可证书不能为空")
return;
}

    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        axios({
          url:'http://localhost:5013/api/Shop/AddProduct',
          method:'post',
          data:ruleForm
        })
        .then(res=>{
          if(res.data.code==101){
            ElMessage.success('新增成功');
            router.push("/ShowProduct")
          }
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
  </script>
  <style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
  